<template>
  <div class="login-container">
      <!-- 导航栏 -->
      <van-nav-bar  title="注册" >
        <van-icon slot="left" name="cross"  @click="$router.back()"/>
      </van-nav-bar>
      <!-- 登陆表单 -->
      <van-form ref="loginForm" @submit="onSubmit">
        <van-field
          v-model="userReg.username"
          type="string"
          name="username"
          label="帐户名"
          placeholder="请输入帐户名"
          :rules="userFormRules.username"
        />
        <van-field
        v-model="userReg.password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="userFormRules.password"
          type="number"

        />
        <van-field
        v-model="userReg.phone"
          name="phone"
          label="电话"
          placeholder="请输入电话"
          :rules="userFormRules.phone"
          type="number"

        />
        <van-field
        v-model="userReg.sex"
          name="sex"
          label="性别"
          placeholder="请输入性别"
          :rules="userFormRules.sex"
          type="string"

        />
        <van-field
        v-model="userReg.name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          :rules="userFormRules.name"

        />
        <van-field
        v-model="userReg.idNumber"
          name="idNumber"
          label="身份证号"
          placeholder="请输入身份证号"
          :rules="userFormRules.idNumber"
          type="number"

        />

        <div class="login-btn-wrap">
          <van-button class="login-btn"  block type="info" native-type="submit">注册</van-button>
          <van-cell class="reg-btn" title="点击登录" is-link   @click="$router.push('/login')"/>
        </div>

      </van-form>
  </div>
</template>

<script>
import { userRegister } from '@/api/user'
export default {
  name: 'LoginIndex',
  data () {
    return {
      // show: false, // 验证弹窗
      userReg: {
        username: '', // 登录账号
        password: '',
        name: '',
        phone: '',
        sex: '',
        idNumber: ''
      },

      userFormRules: {
        username: [{ required: true, message: '帐号不能为空' }],
        password: [{ required: true, message: '密码不能为空' }],
        sex: [{ required: true, message: '性别不能为空' }],
        phone: [{ required: true, message: '电话不能为空' }],
        name: [{ required: true, message: '姓名不能为空' }],
        idNumber: [{ required: true, message: '身份证号不能为空，且必须为18位' }]
      }
      // isCountDownShow: false
    }
  },
  methods: {
    async onSubmit () {
      // 1.获取表单数据
      const userReg = this.userReg
      // 2.表单验证
      // 在组件中必须通过this.$toast来调用toast
      this.$toast.loading({
        message: '注册中...',
        forbidClick: true, // 禁用背景点击
        duration: 1000 // 如果为0，则持续展示
        // loadingType: 'spinner'
      })
      console.log(userReg)
      // 3.提交表单请求登录
      try {
        const { data: res } = await userRegister(userReg)
        console.log(res)
        if (res.data === '注册成功') {
          this.$toast.success('注册成功')
          this.$router.push('/login')
        } else {
          this.$toast.fail(res.msg)
        }
      } catch (error) {
        this.$toast.fail('注册失败,请稍后重试', error)
      }
      // 4.根据响应结果处理后续操作
    }

  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #3926fa;
  .van-nav-bar__title, .van-icon {
    color: #fff;
  }
}
.send-sms-btn {
  background-color: #ededed;

}
.login-btn-wrap {
  padding: 53px 33px;
  .login-btn {
    background-color: #6db4fb;
    border: none;
  }

}
</style>
